<script setup>
import { onMounted, ref } from 'vue';

import { EchartsUI, useEcharts } from '@vben/plugins/echarts';

onMounted(() => {
  renderEcharts(flag.value ? option1.value : option2.value);
});

const chartRef = ref(null);
const { renderEcharts } = useEcharts(chartRef);

// 总数据
const option1 = ref({
  backgroundColor: 'transparent',
  grid: {
    top: 30,
    bottom: 20,
    left: '5%',
    right: '8%',
    containLabel: true,
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  yAxis: {
    type: 'category',
    data: ['微分队', '协会部门', '合唱团', '阅读沙龙', '体育活动', '文艺活动'],
    axisLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.5)',
      },
    },
    axisLabel: {
      color: '#fff',
      fontSize: 12,
    },
  },
  xAxis: {
    type: 'value',
    axisLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.5)',
      },
    },
    axisLabel: {
      color: '#fff',
      fontSize: 12,
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.1)',
      },
    },
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110],
      type: 'bar',
      barWidth: '60%',
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#00e5ff',
            },
            {
              offset: 1,
              color: '#00a8ff',
            },
          ],
        },
      },
    },
  ],
});

// 各二级组织的数据
const option2 = ref({
  backgroundColor: 'transparent',
  grid: {
    top: 30,
    bottom: 20,
    left: '5%',
    right: '8%',
    containLabel: true,
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  legend: {
    data: ['组织A', '组织B', '组织C'],
    textStyle: {
      color: '#fff',
      fontSize: 12,
    },
    top: 0,
    icon: 'roundRect',
    itemWidth: 12,
    itemHeight: 6,
    itemGap: 20,
  },
  yAxis: {
    type: 'category',
    data: ['微分队', '协会部门', '合唱团', '阅读沙龙', '体育活动', '文艺活动'],
    axisLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.5)',
      },
    },
    axisLabel: {
      color: '#fff',
      fontSize: 12,
    },
  },
  xAxis: {
    type: 'value',
    axisLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.5)',
      },
    },
    axisLabel: {
      color: '#fff',
      fontSize: 12,
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.1)',
      },
    },
  },
  series: [
    {
      name: '组织A',
      type: 'bar',
      stack: 'total',
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1, // 改为1，表示水平方向
          y2: 0, // 改为0，取消垂直方向
          colorStops: [
            {
              offset: 0,
              color: '#00f7ff', // 亮青色
            },
            {
              offset: 1,
              color: '#0051ff', // 深蓝色
            },
          ],
        },
        shadowColor: 'rgba(0, 247, 255, 0.6)',
        shadowBlur: 15,
      },
      data: [40, 70, 50, 30, 20, 40],
    },
    {
      name: '组织B',
      type: 'bar',
      stack: 'total',
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1, // 改为1，表示水平方向
          y2: 0, // 改为0，取消垂直方向
          colorStops: [
            {
              offset: 0,
              color: '#ff00f7', // 亮紫色
            },
            {
              offset: 1,
              color: '#7a00ff', // 深紫色
            },
          ],
        },
        shadowColor: 'rgba(255, 0, 247, 0.6)',
        shadowBlur: 15,
      },
      data: [50, 80, 60, 25, 30, 35],
    },
    {
      name: '组织C',
      type: 'bar',
      stack: 'total',
      itemStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1, // 改为1，表示水平方向
          y2: 0, // 改为0，取消垂直方向
          colorStops: [
            {
              offset: 0,
              color: '#00ff88', // 亮绿色
            },
            {
              offset: 1,
              color: '#00ffd5', // 青绿色
            },
          ],
        },
        shadowColor: 'rgba(0, 255, 136, 0.6)',
        shadowBlur: 15,
      },
      data: [30, 50, 40, 25, 20, 35],
    },
  ],
});

// 切换状态
const flag = ref(true);
// 切换图表显示
const handleChange = () => {
  flag.value = !flag.value;
  renderEcharts(flag.value ? option1.value : option2.value);
};
</script>

<template>
  <dv-border-box-13 class="box">
    <div class="mb-2 flex items-center justify-between px-4">
      <h3 class="text-lg text-white">
        {{ flag ? '协会分类(全部)' : '协会分类(各级组织)' }}
      </h3>
      <div
        @click="handleChange"
        class="cursor-pointer text-center text-white transition-opacity duration-300 hover:opacity-80"
        style="height: 20px"
      >
        切换图表
      </div>
    </div>
    <EchartsUI
      ref="chartRef"
      class="w-full"
      style="height: calc(100% - 50px)"
    />
  </dv-border-box-13>
</template>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  padding-top: 20px;
}
</style>
